<template>
  <div class="nav">
    <el-menu
      default-active="1-1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
      <el-submenu :key="item.code" v-for="item in menus" :index="item.code">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.title }}</span>
        </template>
        <el-menu-item-group v-if="item.children">
          <el-menu-item
            v-for="opt in item.children"
            :key="opt.code"
            :index="item.code + '-' + opt.code"
            @click="toPage(opt.path)"
          >
            <template slot="title">
              <i :class="opt.icon"></i>
              <span slot="title">{{ opt.title }}</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    <div class="switch-icon">
      <i
        :class="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
        :title="isCollapse ? '展开菜单' : '收起菜单'"
        class="icon"
        @click="() => (isCollapse = !isCollapse)"
      ></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      isCollapse: false,
      // 系统菜单配置项
      menus: [
        {
          title: "单车管理",
          icon: "el-icon-document",
          code: "1",
          children: [
            {
              title: "单车列表",
              icon: "el-icon-document",
              code: "1",
              path: "/sys/bikeManage/bikeList",
            },
            {
              title: "单车维护",
              icon: "el-icon-document",
              code: "2",
              path: "/sys/bikeManage/bikeRepair",
            },
          ],
        },
        {
          title: "用户管理",
          icon: "el-icon-document",
          code: "2",
          children: [
            {
              title: "系统用户",
              icon: "el-icon-document",
              code: "1",
              path: "/sys/userManage/userList",
            },
            {
              title: "个人中心",
              icon: "el-icon-document",
              code: "2",
              path: "/sys/userManage/userProfile",
            },
          ],
        },
      ],
    };
  },
  methods: {
    toPage(path) {
      const currentRoute = this.$route.path;
      if (currentRoute !== path) {
        this.$router.push({
          path: path,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  height: 100%;
  position: relative;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: calc(100% - 40px);
}

.switch-icon {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  .icon {
    color: #409eff;
    font-size: 26px;
    cursor: pointer;
  }
}
</style>
